<template>
    <div class="home">
        <div class="header">
            <div class="header-box">
                <div class="img-box">
                    <img src="@/assets/meihobuy.png" alt="" />
                </div>
            </div>
            <div class="header-search">
                <i class="sm"></i>
                <div class="search-box" @click="goSearch">
                    <i class="ss"></i>
                    <input type="text" placeholder="搜索商品,品牌" />
                </div>
                <i class="xx"></i>
            </div>
            <div class="nav">
                <ul>
                    <!-- :to="{ name: item.path, query: { type: item.type, uuid: item.uuid } }" -->
                    <li v-for="(item, index) in navlist.navs" :key="index">
                        <router-link active-class="active" :to="{ name: item.path, query: { goods_type: item.goods_type } }">{{ item.name }}</router-link>
                    </li>
                    <!-- <li class="active"><router-link :to="/main/home/curation">精选</router-link></li> -->
                    <!-- <li><router-link to="/main/home/westies">上装</router-link></li> -->
                    <!-- <li><router-link to="/main/home/pants">裤装</router-link></li> -->
                    <!-- <li><router-link to="/main/home/newshoes">球鞋</router-link></li> -->
                    <!-- <li><router-link to="/main/home/fashion">时尚</router-link></li> -->
                    <!-- <li><router-link to="/main/home/tideplay">潮玩</router-link></li> -->
                </ul>
                <div class="right-icon">
                    <i></i>
                </div>
            </div>
        </div>

        <router-view></router-view>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getNavList } from "../../api/index";

let router = useRouter();
let route = useRoute();

let navlist = reactive({ navs: {} });

const goSearch = () => {
    router.push({
        name: "search",
    });
};

getNavList().then((res: any) => {
    // console.log(res.result);
    let { navs } = res.result;
    navlist.navs = navs;
    // console.log(navlist);
});
</script>

<style lang="scss" scoped>
.home {
    padding-bottom: 50px;
}
.header {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    .header-box {
        width: 100%;
        height: 50px;
        background: #313131;
        .img-box {
            margin: 0 auto;
            display: flex;
            align-items: center;
            height: 100%;
            width: 40%;
            img {
                width: 100%;
                // height: 60%;
            }
        }
    }
    .header-search {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 5px 10px;

        .search-box {
            position: relative;
            flex-grow: 1;
            display: flex;

            .ss {
                position: absolute;
                top: 3px;
                left: 5px;
            }
            input {
                border: 0;
                background: #f2f2f2;
                width: 100%;
                font-size: 13px;
                padding: 5px 10px 5px 30px;
            }
        }
        i {
            display: block;
            width: 20px;
            height: 20px;
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .sm {
            margin-right: 15px;
            background-image: url(@/assets/saomiao.png);
        }
        .ss {
            background-image: url(@/assets/sousuo.png);
        }
        .xx {
            margin-left: 15px;
            background-image: url(@/assets/xiaoxi.png);
        }
    }
    .nav {
        margin: 10px 0 5px;
        width: 100%;
        padding: 0 10px;
        display: flex;
        .right-icon {
            width: 15%;
            i {
                // text-align: right;
                margin-left: auto;
                display: block;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/xia.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }
        ul {
            width: 85%;
            display: flex;
            // align-items: center;
            // justify-content: space-between;
        }
        li {
            width: calc(100% / 6);
            text-align: center;
            a {
                width: 100%;
                height: 25px;
                line-height: 25px;
                font-size: 14px;
                color: #999;
            }
        }
        a.active {
            font-size: 18px;
            color: #313131;
            font-weight: bold;
        }
    }
}
</style>
